<template>
  <div class="big-card-area" :style="'background-image:url('+ calcCardBackground + ')'">
    <div class="right-btn">
      <div class="dot-area" v-if="data.detailUrl">
        <div class="click-area" @click="jumpToDetail"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
      </div>
    </div>
    <div class="icon" :style="'background-image:url('+ iconBackground +')'"></div>
    <div class="title">{{ data.title }}</div>
    <div v-if="data && !data.rectangleCover" class="circle-cover" :class="circleCoverClass" :style="'background-image:url('+ backgroundUrl + ')'"></div>
    <div v-else class="rectangle-cover" :class="cardType" :style="'background-image:url('+ backgroundUrl + ')'"></div>
    <div class="total-count" v-if="data.needScore">
      总分：
      <span>{{ totalScore }}</span>
    </div>
    <div class="count-list" v-if="data.needScore && data.cardType === 'all'">
      <div class="line">
        <div
          class="count-list-item"
          data-type="listening"
          @click="clickHandle('listeningScore')"
        >听力：{{ listeningScore }}</div>
        <div
          class="count-list-item"
          data-type="reading"
          @click="clickHandle('readingScore')"
        >阅读：{{ readingScore }}</div>
      </div>
      <div class="line">
        <div
          class="count-list-item"
          data-type="speaking"
          @click="clickHandle('speakingScore')"
        >口语：{{ speakingScore }}</div>
        <div
          class="count-list-item"
          data-type="writing"
          @click="clickHandle('writingScore')"
        >写作：{{ writingScore }}</div>
      </div>
    </div>
  </div>
</template>
    
<script>
const chineseMap = {
  listening: "听力",
  speaking: "口语",
  reading: "阅读",
  writing: "写作",
  all: "考试"
};
export default {
  props: {
    scores: {
      type: Object,
      default: {}
    },
    data: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  computed: {
    circleCoverClass() {
      const arr = [];
      if (!this.data) return '';
      arr.push(this.data.cardType);
      if (this.data.cardClassify === 'custom') arr.push('custom');
      return arr.join(' ');
    },
    backgroundUrl() {
      if (this.data.backgroundUrl) return 'http://cdn1.ielts.group/' + this.data.backgroundUrl;
      const baseUrl = "http://cdn1.ielts.group/定制-";
      return baseUrl + `${chineseMap[this.data.cardType]}@3x.png`;
    },
    calcCardBackground() {
      if (!this.data || !this.data.cardType) return "";
      const baseUrl = "http://cdn1.ielts.group/卡片背景-";
      return baseUrl + `${chineseMap[this.data.cardType]}.png`;
    },
    iconBackground() {
      if (!this.data || !this.data.cardType) return "";
      const baseUrl = "http://cdn1.ielts.group/";
      return baseUrl + `${chineseMap[this.data.cardType]}icon.png`;
    },
    listeningScore() {
      return this.scores.listeningScore
        ? this.scores.listeningScore.toFixed(1)
        : "填写";
    },
    readingScore() {
      return this.scores.readingScore
        ? this.scores.readingScore.toFixed(1)
        : "填写";
    },
    speakingScore() {
      return this.scores.speakingScore
        ? this.scores.speakingScore.toFixed(1)
        : "填写";
    },
    writingScore() {
      return this.scores.writingScore
        ? this.scores.writingScore.toFixed(1)
        : "填写";
    },
    totalScore() {
      if (
        isNaN(this.listeningScore) ||
        isNaN(this.readingScore) ||
        isNaN(this.speakingScore) ||
        isNaN(this.writingScore)
      )
        return "--";
      const averageScore =
        (this.listeningScore -
          0 +
          (this.readingScore - 0) +
          (this.speakingScore - 0) +
          (this.writingScore - 0)) /
        4;
      const integer = Math.floor(averageScore);
      let float = (averageScore + "").split(".")[1] - 0;
      // case 1 .0/.5
      if (isNaN(float) || float === 5) return averageScore.toFixed(1);
      else if (float === 125) return integer.toFixed(1);
      else if (float === 625 || float === 25 || float === 375)
        return (integer + 0.5).toFixed(1);
      else if (float === 75 || float === 875) return (integer + 1).toFixed(1);
    }
  },
  methods: {
    clickHandle(type) {
      this.$emit("clickScore", type);
    },
    jumpToDetail() {
      wx.navigateTo({
        url: '/pages/detail/main?id='+this.data.detailUrl
      })
    }
  },
  watch: {
    totalScore() {
      if (Number.isNaN(this.totalScore)) {
        this.$emit('changeTotalSocore', '');
      } else {
        this.$emit('changeTotalScore', this.totalScore);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.big-card-area {
  width: 296px;
  height: 429px;
  display: block;
  background-color: #fff;
  background-position: center center;
  background-size: 100%;
  background-repeat: no-repeat;
  box-shadow: 0px 20px 40px 0px rgba(95, 95, 95, 1);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  .right-btn {
    right: 0;
    top: 0;
    position: absolute;
    background: rgba(255, 255, 255, 0);
    // border-radius: 0 0 0 107px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    .dot-area {
      display: flex;
      margin-right: 32px;
      margin-top: 33px;
      position: relative;
      z-index: 9;
      .click-area {
        position: absolute;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        top: -30px;
        left: -10px;
      }
      .dot {
        width: 4px;
        height: 4px;
        border-radius: 2px;
        flex: none;
        background: #3d475c;
      }
      .dot + .dot {
        margin-left: 10px;
      }
    }
  }
  .icon {
    width: 42px;
    height: 44px;
    top: 25px;
    left: 25px;
    background-size: 100% !important;
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    // &.yasi-exam-icon {
    //   background: url("http://cdn.ielts.group/考试@3x.png") center
    //     center no-repeat;
    // }
  }
  .title {
    top: 64px;
    left: 49px;
    font-size: 24px;
    width: 200px;
    color: #3d475c;
    position: absolute;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .circle-cover {
    width: 180px;
    height: 180px;
    background-color: #fff;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    top: 110px;
    left: 56px;
    border-radius: 50%;
    z-index: 1;
    &.custom {
      background-size: 60%;
    }
    &.all {
      box-shadow:0px 10px 20px 0px rgba(254,147,169,1);
    }
    &.listening {
      box-shadow:0px 10px 20px 0px rgba(217,154,0,1);
    }
    &.reading {
      box-shadow:0px 10px 20px 0px rgba(138,90,192,1);
    }
    &.writing {
      box-shadow:0px 10px 20px 0px rgba(55,102,199,1);
    }
    &.speaking {
      box-shadow:0px 10px 20px 0px rgba(51,174,146,1);
    }
  }
  .rectangle-cover {
    position: absolute;
    width: 235px;
    height: 235px;
    left: 28px;
    top: 110px;
    background-size: 60%;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 1;
  }
  .total-count {
    left: 87px;
    top: 290px;
    position: absolute;
    font-size: 20px;
    display: flex;
    align-items: center;
    span {
      font-size: 40px;
      font-weight: 500;
    }
  }
  .count-list {
    left: 48px;
    position: absolute;
    bottom: 27px;
    .line {
      display: flex;
    }
    .count-list-item + .count-list-item {
      margin-left: 25px;
    }
    .line + .line {
      margin-top: 10px;
    }
    .count-list-item {
      color: rgba(61, 71, 92, 1);
      min-width: 75px;
      flex: none;
      font-size: 16px;
    }
  }
}
</style>